<template>
  <div>
    <div class="head">
      <router-link to='/shouye'>
      	<img src="../assets/jtz.png" alt="">
      </router-link>
	  <span id="ss">搜索</span>
    </div>
	<div class="sousuo">
		<input type="text" placeholder="请输入商家或者美食名称">
		
		<button>提交</button>
	</div>
	
	<Foot></Foot>
  </div>
</template>

<script>
	//引用组件 Foot
	import Foot from "../components/foot";
	export default{
		components: {
		  Foot: Foot
		},
	}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}

html,
body {
  width: 100%;
  font-size: 20px;
  background: rgba(0,0,0,0.04);
}
.head {
  width: 100%;
  height: 3rem;
  background: #3190e8;
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.head img{
	width: 2.3rem;
	position: absolute;
	top: 0.5rem;
	left: 0.2rem;
}
#ss {
  font-size: 1.3rem;
  color: white;
  font-weight: 570;
  margin: 0 auto;
}

.sousuo{
	width: 100%;
	background: white;
	height: 3.8rem;
}
.sousuo input{
	width: 65%;
	height: 2.5rem;
	line-height: 3rem;
	border-radius:0.4rem;
	margin-top: 0.6rem;
	margin-left: 1rem;
	border: 0.05rem solid rgba(0,0,0,0.1);
	outline:none;
	padding-left: 1rem;
	background-color: #F5F5F5;
	font-size: 1rem;
	font-weight: 600;
}
.sousuo button{
	height: 2.5rem;
	width: 20%;
	margin-left: 0.3rem;
	border-radius:0.6rem;
	background: #3190E8;
	color: white;
	font-size: 1rem;
	border: 0;
	margin-top: 0.6rem;
	outline:none;
}

</style>
